﻿@namespace FluentUI.Demo.Shared

<FluentCounterBadge Count="100" Appearance="Appearance.Accent">
    <FluentButton>
        <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Neutral" />
    </FluentButton>
</FluentCounterBadge>

<FluentSpacer Width="25" />

<FluentCounterBadge Count="5" Appearance="Appearance.Neutral">
    <FluentButton Appearance="Appearance.Accent">
        <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Fill" />
    </FluentButton>
</FluentCounterBadge>

<FluentSpacer Width="25" />

<FluentCounterBadge Count="5" Appearance="Appearance.Lightweight">
    <FluentButton Appearance="Appearance.Accent">
        <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Fill" />
    </FluentButton>
</FluentCounterBadge>

<FluentSpacer Width="25" />

<FluentCounterBadge Count="5" Appearance="Appearance.Lightweight" BackgroundColor="Color.Lightweight"  Color="Color.Error"> 
    <FluentButton Appearance="Appearance.Accent">
        <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Fill" />
    </FluentButton>
</FluentCounterBadge>

<FluentSpacer Width="25" />


<FluentCounterBadge Count="9" BackgroundColor="@Color.Error" Color="Color.Fill">
    <FluentButton Appearance="Appearance.Neutral">
        <FluentIcon Value="@(new Icons.Regular.Size24.Mail())" Color="@Color.FillInverse" />
    </FluentButton>
</FluentCounterBadge>

<FluentSpacer Width="25" />

<FluentCounterBadge Count="0" Appearance="Appearance.Accent" ShowZero=true> 
    <FluentButton>
        <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Neutral" />
    </FluentButton>
</FluentCounterBadge>